<template>
  <div class="fly-panel" style="margin-bottom: 0;">
    <div class="fly-panel-title fly-filter">
      <a :class="{'layui-this': status === '' && tag === ''}" @click.prevent="search(0)">综合</a>
      <span class="fly-mid"></span>
      <a :class="{'layui-this': status === '0' && tag === ''}" @click.prevent="search(1)">未结</a>
      <span class="fly-mid"></span>
      <a :class="{'layui-this': status === '1' && tag === ''}" @click.prevent="search(2)">已结</a>
      <span class="fly-mid"></span>
      <a :class="{'layui-this': status === '' && tag === '精华'}" @click.prevent="search(3)">精华</a>
      <span class="fly-filter-right layui-hide-xs">
        <a :class="{'layui-this': sort === 'created'}" @click.prevent="search(4)">按最新</a>
        <span class="fly-mid"></span>
        <a :class="{'layui-this': sort === 'answer'}" @click.prevent="search(5)">按热议</a>
      </span>
    </div>
    <my-listItem @nextPage="getNextPage" :list="lists" :isEnd="isEnd"></my-listItem>
  </div>
</template>
<script>
import ListItem from '@/components/content/ListItem';
import { getList } from '@/api/content.js';

export default {
  name: 'List',
  components: {
    'my-listItem': ListItem
  },
  data () {
    return {
      // 管理tab栏的状态
      status: '',
      tag: '',
      sort: 'created',
      // 管理list数据的状态
      page: 0,
      limit: 20,
      catalog: '',
      lists: [],
      // 是否到尾页记录状态量
      isEnd: false,
      // 网络请求锁
      isResponse: true,
      // tab栏切换的状态量
      current: 0
    };
  },
  watch: {
    // list组件tab栏切换的监听事件处理
    current () {
      this.init();
    },
    // panel上的tabl栏切换的监听事件处理
    $route () {
      this.catalog = this.$route.params.catalog ? this.$route.params.catalog : '';
      this.init();
    }
  },
  methods: {
    init () {
      this.page = 0;
      this.lists = [];
      this._getList();
    },
    search (status) {
      if (status === this.current) return;
      this.current = status;
      switch (status) {
        case 0:
          this.status = '';
          this.tag = '';
          break;
        case 1:
          this.status = '0';
          this.tag = '';
          break;
        case 2:
          this.status = '1';
          this.tag = '';
          break;
        case 3:
          this.status = '';
          this.tag = '精华';
          break;
        case 4:
          this.sort = 'created';
          break;
        case 5:
          this.sort = 'answer';
          break;
      }
    },
    _getList () {
      if (!this.isResponse) return;
      const option = {
        type: 0,
        page: this.page,
        limit: this.limit,
        catalog: this.catalog,
        sort: this.sort,
        status: this.status,
        tag: this.tag
      };
      this.isResponse = false;
      getList(option).then(res => {
        this.isResponse = true;
        // console.log(res);
        // list数据刷新处理
        if (this.lists.length === 0) {
          this.lists = res.data;
        } else {
          this.lists = this.lists.concat(res.data);
        }
        // 是否到尾页判断处理
        if (this.lists.length < 20) this.isEnd = true;
        else this.isEnd = false;
      }).catch(err => {
        this.isEnd = true;
        this.$alert(err);
      });
    },
    getNextPage () {
      this.page++;
      this._getList();
    }
  },
  mounted () {
    // 获取当前页面的分类路由参数并赋值给catalog状态
    this.catalog = this.$route.params.catalog ? this.$route.params.catalog : '';
    this._getList();
  }
};
</script>
<style scoped lang="scss">
.fly-panel {

  a {
    display: inline-block;
    cursor: pointer;
  }
}
</style>
